<template>
	<div class="editCoupon">
		<header>编辑优惠券</header>
		<div class="contents">
			<div class="couponName common">
				<p style="width:200px;">优惠券名称：</p>
				<el-input v-model.trim="input1" placeholder="给优惠券请个名字"></el-input>
			</div>
			<div class="couponType common">
				<p>优惠券类型：</p>
				<el-select v-model="value1" placeholder="请选择" style="width:300px;">
					<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</div>
			<div class="couponDate common">
				<p>选择有效日期：</p>
				<span>
					<el-date-picker v-model="value2" type="daterange" :picker-options="pickerOptions2" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> </el-date-picker>
				</span>
			</div>
			<div class="payFee common">
				<p>支付金额/可抵用金额：</p>
				<el-input style="width:130px;" v-model.trim="input2" placeholder="说明"></el-input>
				<span style="margin-left:20px;">元</span>
			</div>
			<div class="sumLimit common">
				<p>满抵金额限制：</p>
				<div class="explain2">
					<el-input style="width:130px;margin-top:48px;" v-model.trim="input3" placeholder="说明"></el-input>
					<p>消费满该限制方可使用</p>
				</div>
				<span style="margin-left:-14px;">元</span>
			</div>
			<div class="useRange common">
				<p>适用范围：</p>
				<div class="selectedTags" v-if="tags.length>0">
					<el-tag v-for="(tag,index) in tags" :key="tag.index" closable @close="handleClose(tag)" :type="tag.type"> {{tag.SUBJECT}} </el-tag>
				</div>
				<el-button @click.native="selectRange" style="margin-left:30px;">选择范围</el-button>
			</div>
			<div class="explain common">
				<p>说明：</p>
				<el-input style="width:500px;" v-model.trim="input5" placeholder="说明"></el-input>
			</div>
			<div class="buttons common">
				<el-button type="danger" style="background:#e7251a;" @click.native="submits">提交</el-button>
				<el-button @click.native="cancels">取消</el-button>
			</div>
		</div>
		<!--选择适用范围-->
		<el-dialog title="选择适用范围" :visible.sync="dialogs" width="75%">
			<div class="dialog_box">
				<div class="condition" style="display:none;">
					<p>所属门店：</p>
					<el-select v-model="value3" placeholder="请选择" style="width:300px;">
						<el-option v-for="item in options3" :key="item.COMP_ID" :label="item.SHOP_NAME" :value="item.COMP_ID"> </el-option>
					</el-select>
					<el-button type="danger" style="margin:0 0 0 45px;background:#e7251a;" @click.native="querys">查询</el-button>
					<el-button @click.native="resets">重置</el-button>
				</div>
				<div v-if="!noData" class="all_datas" v-loading="loading">
					<div class="checkbox_explain" v-for="items in rangeDatas">
						<p>{{items.CLASS}}：</p>
						<div class="all_checkbox" v-for="(item,ind) in items.RANGEARR">
							<el-checkbox-group v-model="checkList">
								<el-checkbox :label="item" :key="item.SUBJECT">{{item.SUBJECT}}</el-checkbox>
								</el-checkbox-group?>
						</div>
					</div>
				</div>
				<div v-if="noData" class="no_data">暂无数据</div>
				<div class="two_btns">
					<el-button @click.native="cancel2">取消</el-button>
					<el-button type="primary" @click.native="ensures">确定</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import qs from 'qs'
	import { getCookie } from '@/assets/js/cookie'
	import { selectionRange } from '@/api/coupon'
	import { get4SCafeShopList } from '@/api/market'
	import { getCashVolumeRecordById } from '@/api/coupon';
	import dateSelect from '@/assets/js/date_time_picker.js' //日期选择器数据封装
	export default {
		name: 'editCoupon',
		data() {
			return {
				userID: '', //用户id    	
				input1: '', //优惠券名称
				value1: '', //优惠券类型
				options1: [{
					value: 1,
					label: '满减劵'
				}, {
					value: 2,
					label: '兑换劵'
				}, {
					value: 3,
					label: '服务券'
				}, {
					value: 4,
					label: 'N元劵'
				}, {
					value: 5,
					label: '折扣劵'
				}],
				value2: [], //优惠券有效日期
				pickerOptions2: dateSelect,
				input2: '', //支付金额
				input3: '', //满抵金额限制        
				tags: [], //适用范围        
				input5: '', //说明
				dialogs: false, //是否显示选择适用范围
				value3: '', //所属门店
				options3: [], //门店
				editDatas: '', //编辑商品的详细信息
				rangeDatas: [], //券使用范围数据
				checkList: [], //已选checkbox
				loading: true,
				noData: false, //是否没数据        
			}
		},
		created() {
			//离开页面提醒
        	window.onbeforeunload = function(e) {
                var e = window.event || e;
                e.returnValue = ("在新增或编辑时，关闭选项卡将导致数据无法保存");
            }
			this.userID = getCookie('userId');
			//所有4s门店
			get4SCafeShopList().then(res => {
				if(res.data.STATUS_CODE === 1) {
					this.options3 = res.data.SHOP_LIST;
				}
			})
			//优惠券详情
			getCashVolumeRecordById(this.$route.params.id).then(res => {
				if(res.data.STATUS_CODE) {
					this.editDatas = res.data;
					this.input1 = this.editDatas.SUBJECT; //优惠券名称
					this.value1 = this.editDatas.CATEGORY; //优惠券类型
					this.value2.push(new Date(this.editDatas.STARTDATE)); //有效日期开始时间
					this.value2.push(new Date(this.editDatas.EXPDATE)); //有效日期结束时间
					this.input2 = this.editDatas.USABLEPRICE; //可抵用金额
					this.input3 = this.editDatas.AMOUNT; //满抵金额	   		
					let strr = this.editDatas.USERANGE.split(',');
					let arrs = [];
					for(let i = 0; i < strr.length; i++) {
						let obj = {};
						obj.SUBJECT = strr[i];
						arrs.push(obj);
					}
					//console.log(arr);
					this.checkList = this.tags = arrs; //适用范围
					this.editDatas.CASHVOLRMK ? this.input5 = this.editDatas.CASHVOLRMK : null; //说明 可以为空
					this.getR();
				}
			})
		},
		methods: {
			handleClose(tag) {
				this.tags.splice(this.tags.indexOf(tag), 1);
			},
			getR() {
				let obj = {};
				obj.USER_ID = this.userID;
				obj.CATEGORY = this.value1;
				selectionRange(obj).then(res => {
					this.loading = true;
					this.noData = false;
					if(res.data.STATUS_CODE === 1) {
						this.loading = false;
						if(res.data.SELECTIONARR.length === 0) {
							this.noData = true;
							return false;
						}
						this.rangeDatas = res.data.SELECTIONARR;
					}
				})
			},
			//选择范围
			selectRange() {
				if(this.value1 == '') {
					this.$alert('请选择优惠券类型', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				this.dialogs = true;
			},
			//确定
			ensures() {
				this.tags = this.checkList;
				this.dialogs = false;
			},
			//取消
			cancel2() {
				this.checkList = [];
				this.dialogs = false;
			},
			//提交
			submits() {
				//console.log(this.tags);return;
				let arrs = [];
                this.checkList.forEach(function(v) {
                    arrs.push(v.SUBJECT);
                })
				if(this.value2 === null){
                	this.value2 = '';
                }
				if(this.input1 == '') {
					this.$alert('请输入优惠券名称', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if(this.value1 == '') {
					this.$alert('请选择优惠券类型', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if(this.value2.length === 0) {
					this.$alert('请选择有效时间', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if(this.input2 == '') {
					this.$alert('请输入可抵用金额', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if(this.input3 == '') {
					this.$alert('请输入满抵金额限制', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if(this.tags.length === 0) {
					this.$alert('请选择适用范围', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				let obj = {};
                obj.POINTEXCHANGE_ID = this.$route.params.id;
                obj.SUBJECT = this.input1;
                obj.CATEGORY = this.value1;
                obj.STARTTIME = this.value2[0].getTime();
                obj.EXPTIME = this.value2[1].getTime();
                obj.AMOUNT = this.input7;
                obj.USABLEPRICE = this.input3;
                obj.USERANGE = arrs.join();
                obj.CASHVOLRMK = this.input5;
                //console.log(obj);return;
				this.$axiosPost('/4SCAFE/CashVolumeRecord/saveCashVolumeRecord.action', obj).then(res => {
                    console.log(res);
                    if(res.STATUS_CODE === 1) {
                        this.$message.success('编辑成功');
                        setTimeout(() => this.$router.push({
                            path: '/functions/coupon'
                        }), 1000);
                    }
                })
			},
			//取消
			cancels() {
				this.$confirm('此操作将不会保存信息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$router.push({
						path: '/functions/coupon'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消操作'
					});
				});
			},
			//查询
			querys() {
				if(this.value3) {
					this.rangeDatas = [];
				}
				let obj = {};
				this.value3 ? obj.COMPID = this.value3 : null;
				obj.CATEGORY = this.value1;
				selectionRange(obj).then(res => {
					this.loading = true;
					this.noData = false;
					if(res.data.STATUS_CODE === 1) {
						this.loading = false;
						if(res.data.SELECTIONARR.length === 0) {
							this.noData = true;
							return false;
						}
						this.rangeDatas = res.data.SELECTIONARR;
					}
				})
			},
			//重置
			resets() {
				this.value3 = '';
			},
		},
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.editCoupon {
		header {
			background: #fff;
			font-size: 22px;
			font-weight: 700;
			padding: 20px;
		}
		.contents {
			height: 800px;
			background: #fff;
			margin: 30px;
			padding-top: 60px;
			display: flex;
			flex-flow: column;
			align-items: center;
			p {
				white-space: nowrap;
				width: 165px;
				text-align: right;
			}
			.common {
				width: 50%;
				margin: 26px auto 0 auto;
				display: flex;
				align-items: center;
			}
			.sumLimit {
				margin-top: -20px;
				.explain2 {
					p {
						font-size: 14px;
						color: #a8a8a5;
						text-align: left;
					}
				}
			}
			.useRange {
				margin-top: 10px;
				.selectedTags {
					border: 1px solid #dcdfe6;
					padding: 8px;
				}
			}
			.buttons {
				width: 28%;
				display: flex;
			}
		}
		.dialog_box {
			width: 100%;
			border-top: 1px solid #f0f0f0;
			.condition {
				display: flex;
				align-items: center;
				padding: 25px 0 25px 25px;
				p {
					color: #000;
				}
			}
			.all_datas {
				.checkbox_explain {
					display: flex;
					flex-flow: wrap;
					align-items: center;
					padding: 30px 30px 0 30px;
					border-bottom: 1px solid #f0f0f0;
					p {
						width: 0;
						white-space: nowrap;
						color: #000;
						margin-top: -10px;
					}
					.all_checkbox {
						/* 主要控制这个样式 */
						margin: 0 0 22px 70px;
						width: 120px;
					}
				}
			}
			.no_data {
				text-align: center;
				margin-top: 30px;
			}
			.two_btns {
				padding: 10px 50px 0 0;
				display: flex;
				justify-content: flex-end;
			}
		}
	}
	.el-dialog__body {
		padding: 0!important;
	}
</style>